<template>
  <div class="meCart">
    <v-header :title="this.$route.meta.title"></v-header>
    <!-- list -->
    <div class="cart-list" v-if="cartList.length > 0">
      <div
        class="cart-list-item"
        v-for="(item, index) in cartList"
        :key="index"
      >
        <div class="cart-left">
          <van-checkbox v-model="item.flag"></van-checkbox>
        </div>
        <van-card
          class="cart-right"
          :price="item.price + '.00'"
          :title="item.name"
          :thumb="item.img_url"
        >
          <template #desc>
            <van-stepper
              v-model="item.count"
              @change="numClick(item.count, item.shop_id)"
            />
          </template>
        </van-card>
        <van-icon name="delete-o" @click="delCartList(index)" />
      </div>
      <van-submit-bar
        :price="getAllPrice * 100"
        button-text="结算"
        v-if="cartList.length > 0"
      >
        <!-- submit-bar -->

        <!-- <van-checkbox v-model="checkedAll" @click="handleCheckedAll"
        >全选</van-checkbox
      > -->
        <input
          type="checkbox"
          :checked="checkedAll"
          @click="handleCheckedAll"
          class="ipt"
        />全选

        <!-- <template #tip> -->
        <!-- 你的收货地址不支持同城送, -->
        <!-- <span @click="onClickEditAddress">修改地址</span> -->
        <!-- </template> -->
      </van-submit-bar>
    </div>

    <div v-else class="cartImg">
      <img src="../../../../static/img/gouwuche.png" alt="购物车图片" />
      <h3>购物车是空的哦，快去购物吧</h3>
      <router-link to="/home">逛一逛</router-link>
    </div>

    <!-- </div> -->
  </div>
</template>
<script>
import header from "@/components/header/index.vue";
import { mapState, mapGetters } from "vuex";
export default {
  components: {
    "v-header": header,
  },
  computed: {
    ...mapState("cart", ["cartList"]),
    ...mapGetters("cart", ["getAllPrice", "checkedAll"]),
  },
  data() {
    return {
      checked: true,
    };
  },
  methods: {
    handleCheckedAll() {
      this.$store.commit("cart/CHECKED_ALL");
    },
    numClick(count, shop_id) {
      this.$store.commit("cart/NUM_CLICK", { count, shop_id });
    },
    delCartList(index) {
      this.$store.commit("cart/DEL_CARTS", { index });
    },
  },
};
</script>
<style lang="scss">
.meCart {
  background: #fff;
  padding: 10px;
  .cartImg img {
    width: 170px;
    height: 200px;
    display: block;
    margin: auto;
    padding-top: 60px;
  }
  h3 {
    text-align: center;
  }
  .cartImg a {
    display: block;
    text-align: center;
    margin: 30px auto;
    width: 110px;
    height: 37px;
    line-height: 37px;
    border-radius: 4px;
    text-align: center;
    background: #e0524b;
    color: white;
    font-weight: 800;
    font-size: 20px;
  }
  .cart-list {
    margin-top: 47px;
  }
  .cart-list-item {
    height: 120px;
    padding-top: 17px;
  }
  .cart-list {
    .van-icon-delete-o {
      font-size: 25px;
      margin-top: 34px;
      margin-right: 15px;
    }
    .cart-list-item {
      display: flex;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-bottom: 10px;
      .cart-left {
        flex: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .cart-right {
        flex: 2.5;
        margin-top: 0;
        background-color: #fff;
        .van-stepper {
          margin-top: 12px;
        }
      }
    }
  }
}
</style>
